﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	
	<body onclick="window.location.href='023.html'">
		
		<style>
body {
    background-color: black;
    background-size: 100%;
    
}
p{color: white;
font-family:"courier new";
font-size:20px;
position:fixed;
bottom: 0;
right: 10%;
animation: blink 2.5s infinite;
}

@keyframes blink{
	0%{opacity: 0;}
	25%{opacity: 1;}
	50%{opacity: 0;}
	75%{opacity: 1;}
	100%{opacity: 0;}
}
.dialog {
    width:100%;
    height:100px;
    
    position:absolute;
    bottom: 50px;
}

.dialog .innerBox{
    width:90%;
    height:80px;
    
    opacity: 1;
    left:85px;
    top:10px;
    position: absolute;
    border-radius: 5px;
    font-size: 20px;
    font-family: 微软雅黑;
    color:#fff;
    text-shadow: 1px -1px 1px #333;
    word-wrap:break-word;
    padding:2px;
}

	
}

		</style>
			<div class='dialog'>
    <span class='pic'></span>
    <div class='innerBox'></div>
    
</div>
<p>Next</p>



<script>
	window.onload = function(){
    var innerBox = document.getElementsByClassName('innerBox')[0];
    
    
    var text = 'You figured it out. The first one you met has learned your language and told it to another one. Your words have spread across this floor. These people would never have given these names  in this world and it is you who taught them. ';
    var len = text.length;
    var timer = null;
    var index = 0;
    timer = setInterval(function(){
        if(index == len){
            clearInterval(timer);
        }
        innerBox.innerHTML += text.charAt(index++);
    },20);
}
	</script>
	</body>
</html>